// 基本信息
import { getNotifyConfigList } from "@/api/modules/notification";
import { getUserList } from "@/api/modules/user";
import MsgTypeTag from "@/components/Tags/MsgTypeTag";
import { useMessage } from "@/hooks/useMessage";
import { notifyType, notifyUserType } from "@/utils/constants";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},

	emits: ["submit"],
	setup(props) {
		type FormInstance = InstanceType<typeof ElForm>;
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const formRef = ref<FormInstance>();
		const userList = ref([]);
		const emailList = ref<String[]>([]);
		const phoneList = ref<String[]>([]);
		const formRule = reactive({});
		const state = useMessage().getMsgContent(props.detail.content);
		watch(
			() => props.detail.configId,
			() => {
				loadConfig();
			}
		);
		const loadConfig = async () => {
			if (!props.detail.configId) {
				return;
			}
			//获取通知配置
			let res: any = await getNotifyConfigList({ id: props.detail.configId });
			// res.result[0].sendTargetType = "4";
			// res.result[0].sendTarget = '{"mobile":"111;222","email":"111@qq;222@.qq"}';

			if (res.result[0]?.sendTargetType == notifyUserType.systemUser) {
				//获取用户列表
				let targetUser = res.result[0]?.sendTarget?.split(",");
				let { result } = await getUserList({ id: targetUser.join(","), self: 1 });
				userList.value = result.records.filter((user: any) => targetUser.includes(user.id));
			} else if (res.result[0]?.sendTargetType == notifyUserType.custUser) {
				let info: { mobile?: string; email?: string } = JSON.parse(res.result[0]?.sendTarget);
				emailList.value = info.email?.split(";") ?? [];
				phoneList.value = info.mobile?.split(";") ?? [];
			}
		};
		loadConfig();
		return () => {
			return (
				<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100" disabled>
					<el-form-item label={proxy?.$t("notifydetail.form_label.create_time")} prop="createTime">
						<div>{props.detail.createTime} </div>
					</el-form-item>
					<el-form-item label={proxy?.$t("notifydetail.form_label.type")} prop="mstType">
						<MsgTypeTag content={props.detail.content} />
					</el-form-item>
					<el-form-item label={proxy?.$t("notifydetail.form_label.content")} prop="content">
						<div> {state.content} </div>
					</el-form-item>
					{userList.value.length ? (
						<el-form-item label={proxy?.$t("notifydetail.form_label.person")} prop="content">
							{userList.value.map((item: any, i: number) => {
								return (
									<>
										{i > 0 ? <span class="ml-1 mr-1">，</span> : null}
										<span>{item.alias || item.username}</span>
									</>
								);
							})}
						</el-form-item>
					) : (
						<>
							{state.type == notifyType.email && emailList.value.length ? (
								<el-form-item label={proxy?.$t("notifydetail.form_label.email")} prop="content">
									{emailList.value.map((email, i: number) => {
										return (
											<>
												{i > 0 ? <span class="ml-1 mr-1">，</span> : null}
												<span>{email}</span>
											</>
										);
									})}
								</el-form-item>
							) : null}
							{state.type == notifyType.sms && phoneList.value.length ? (
								<el-form-item label={proxy?.$t("notifydetail.form_label.phone_msg")} prop="content">
									{phoneList.value.map((phone, i: number) => {
										return (
											<>
												{i > 0 ? <span class="ml-1 mr-1">，</span> : null}
												<span>{phone}</span>
											</>
										);
									})}
								</el-form-item>
							) : null}
						</>
					)}
					{props.detail.sendErr ? (
						<el-form-item label={proxy?.$t("notifydetail.form_label.fail_reason")} prop="content">
							<div class="text-red-600">{props.detail.sendErr}</div>
						</el-form-item>
					) : null}
				</el-form>
			);
		};
	}
});
